export default {
  install(Vue) {
    Vue.component('marked-essay', {
      name: 'marked-essay',
      props: {
        fileName: {
          type: String,
          required: true
        },
        more: {
          type: Boolean,
          default: false
        },
        showMoreStyle: {
          type: Function
        },
        splitWord: {
          type: String,
          default: '<!-- more -->'
        }
      },
      data() {
        return {
          articleHTML: ''
        }
      },
      computed: {
        renderHtml() {
          if (!this.more) return this.articleHTML

          return this.articleHTML.split(this.splitWord)[0]
        }
      },
      render(h) {
        const children = [
          h(
            'div',
            {
              domProps: {
                innerHTML: this.renderHtml
              }
            }
          )
        ]

        if (this.more) {
          let moreStyle = h(
            'div',
            [
              h(
                'a',
                {
                  attrs: {
                    href: 'javascript:;',
                    title: 'more'
                  },
                  on: {
                    click: this.handleCheck
                  }
                },
                'more>>'
              )
            ]
          )
          if (this.showMoreStyle) moreStyle = this.showMoreStyle(h)

          children.push(moreStyle)
        }

        return h(
          'div',
          {
            class: 'marked-essay'
          },
          children
        )
      },
      mounted() {
        if (this.fileName) {
          import(
            /* webpackChunkName: 'articles/article' */ 
            `${ARTICLE_BASE}/${this.fileName}` // eslint-disable-line
          )
            .then(({ default: html }) => {
              this.articleHTML = html
            })
        }
      },
      methods: {
        handleCheck() {
          this.$emit('check-more', this.fileName)
        }
      }
    })
  }
}